<template>
  <div id="loginView">
    <div class="box">
      <div class="title">
        <h2>登录</h2>
      </div>

      <a-form
        :model="formState"
        :label-col="{ span: 5 }"
        :wrapperCol="{ span: 19 }"
        :rules="rules"
        name="normal_login"
        class="login-form"
        labelAlign="left"
        @finish="handerSubmit"
      >
        <a-form-item label="账户" name="userAccount">
          <a-input v-model:value="formState.userAccount">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item label="密码" name="userPassword">
          <a-input-password v-model:value="formState.userPassword">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            登 录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, computed } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { userLoginServer } from "@/api/user";
import { useLoginUserStore } from "@/store/useLoginUserStore";
const loginUserStore = useLoginUserStore();
const router = useRouter();
interface FormState {
  userAccount: string;
  userPassword: string;
}
const formState = reactive<FormState>({
  userAccount: "",
  userPassword: "",
});

const rules = {
  userAccount: [
    {
      required: true,
      message: "请输入账户",
      trigger: "blur",
    },
    {
      min: 4,
      max: 16,
      message: "长度在 4 到 16 个字符",
      trigger: "blur",
    },
  ],
  userPassword: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
  ],
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handerSubmit = async (values: any) => {
  const res = await userLoginServer(values);
  if (res.data.code === 0) {
    await loginUserStore.fetchLoginUser();
    message.success("登录成功");
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error("登录失败！" + res.data.description);
  }
};

const disabled = computed(() => {
  return !(formState.userAccount && formState.userPassword);
});
</script>
<style scoped lang="scss">
#loginView {
  width: 100%;
  // height: 78vh;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    width: 25%;
    height: 33%;
    background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* 阴影 */
    backdrop-filter: blur(10px); /* 模糊效果 */
    border: 1px solid rgba(255, 255, 255, 0.18); /* 边框 */
    .title {
      text-align: center;
      margin-bottom: 20px;
    }
    .login-form {
      margin: 0 auto;
      max-width: 480px;
    }
    .login-form-button {
      width: 100%;
    }
  }
}
</style>
